<template>
  <div>
    <div v-if="roomList.length == 0">
      <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
        description="还未创建房间" />
    </div>
    <div class="roomList" v-else>
      <div class="room_item" v-for="(item, index) in roomList" :key="index">
        <div>
          <div class="roomName" @click="goRoom(item)">
            {{ item.roomName }}
          </div>
          <div class="roomOption">
            <div class="left">
              房间号：{{ item.roomId }}
            </div>
          </div>
        </div>

        <div class="right">
          <van-icon name="delete-o" size="20px" @click="deleteRoom(item)" />
          <van-icon name="share-o" size="20px" @click="shareRoom(item)" />
        </div>
      </div>

    </div>
    <div>
      <van-button round block type="primary" @click="createRoom" style="margin-bottom: 30px;">
        创建房间
      </van-button>
      <van-button round block type="primary" @click="addRoom">
        加入房间
      </van-button>
    </div>
    <van-dialog v-model:show="show" title="创建房间">
      <van-form ref="form">
        <van-field v-model="roomName" name="roomName" placeholder="房间名" />
        <!-- <div class="dialog_footer">
          <van-button block @click="closeDialog">
            关闭
          </van-button>
          <van-button block type="primary" native-type="submit">
            提交
          </van-button>
        </div> -->
      </van-form>
      <template #footer>
        <div class="dialog_footer">
          <van-button size="large" @click="closeDialog">取消</van-button>
          <van-button size="large" type="primary" @click="submitRoom">确认</van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';
import { roomAdd, roomQuery, roomDelete } from '@/api/room.js';
import Cookies from 'js-cookie';
import { showToast, showLoadingToast } from 'vant';
const { proxy } = getCurrentInstance();

const roomName = ref('');
const show = ref(false);
const userId = ref(null);
const roomList = ref([]);

onMounted(() => {
  userId.value = Cookies.get('userId');
  queryRoom();
});

function queryRoom() {
  roomQuery({ userId: userId.value }).then(res => {
    if (res.code == 200) {
      roomList.value = res.data;
    }
  });
}

function createRoom() {
  show.value = true;
  /* showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 10000000,
  }); */
}

// 加入房间
function addRoom() {

}

// 跳转到房间
function goRoom(item) {
  proxy.$router.push({
    path: '/room',
    query:{
      roomName: item.roomName
    }
  });
}

// 删除房间
function deleteRoom(item) {
  roomDelete({ deleteTag: 1, roomId: item.roomId, userId: item.userId }).then(res => {
    if (res.code == 200) {
      showToast('删除成功');
      queryRoom();
    }
  });
}

// 关闭弹窗
function closeDialog() {
  show.value = false;
  roomName.value = '';
}

// 确认创建房间
function submitRoom() {
  if (roomName.value == '') {
    showToast('房间名不能为空');
    return;
  }
  let par = {
    roomName: roomName.value,
    userId: userId.value
  };
  roomAdd(par).then(res => {
    if (res.code == 200) {
      showToast('创建成功');
    } else {
      showToast('创建失败');
      /* show.value = false;
      roomName.value = '';
      queryRoom();
      proxy.$refs.form.resetValidation(); */
    }
    show.value = false;
    roomName.value = '';
    queryRoom();
    proxy.$refs.form.resetValidation();
  });
}

</script>

<style lang="scss" scoped>
.roomList {
  width: 100%;
  margin-bottom: 30px;

  .room_item {
    width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .roomName {
      font-size: 22px;
      font-weight: bold;
    }

    .roomOption {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #666;
    }

    .right {
      display: flex;
      align-items: center;

      :deep(.van-icon) {
        margin: 0 10px;
      }
    }
  }
}

/* :deep(.van-dialog__footer) {
  display: none;
} */

.dialog_footer {
  display: flex;
}

:deep(.van-field__value) {
  border: 1px solid;

  .van-field__control {
    padding-left: 10px;
  }
}
</style>